<template>
    <div>
        <div>
            <el-card shadow="always" class="box-card">
                <el-row :gutter="20">
                    <el-col :span="3" :offset="1"><div class="grid-content bg-purple"><span>已通过</span></div></el-col>
                    <el-col :span="9" :offset="11">
                        <div class="grid-content bg-purple">
                            <el-button size="mini">刷新</el-button>
                            <el-button size="mini" @click="returnPage">返回</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-card>
        </div>
        <div class="box1">
            <el-button size="medium" @click="butall()">全部评论(<span style="color: red">{{tongji.all}}</span>)</el-button>
            <el-button size="medium" >已通过(<span style="color: red">{{tongji.pass}}</span>)</el-button>
            <el-button size="medium" @click="butblock()">已拦截(<span style="color: red">{{tongji.block}}</span>)</el-button>
            <el-button size="medium" @click="butdel()">已删除(<span style="color: red">{{tongji.del}}</span>)</el-button>
        </div>
        <!--        评论次数统计-->
        <el-card >
            <div>
                <div style="background-color: #F3F3F3 ; height: 50px">
                    <span style="float:left ; padding-top: 10px;font-size: 16px" ><i class="el-icon-s-unfold"></i>评论列表</span>
                    <div style="padding: 10px 10px ; float: right">
                        <el-button size="medium">显示条数 <i class="el-icon-caret-bottom"></i></el-button>
                        <el-button size="medium">排序方式 <i class="el-icon-caret-bottom"></i></el-button>
                    </div>
                </div>
                <el-table
                        :data="tableData"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="account"
                            label="成员账号">
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="所属课程">
                    </el-table-column>
                    <el-table-column
                            prop="commentDate"
                            label="发言时间">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="发言内容">
                    </el-table-column>
                    <el-table-column
                            :prop="commentType"
                            label="状态">
                         <template slot-scope="scope">
                                    <!-- scope.row 包含表格里当前行的所有数据 -->
                                    <span :class="scope.row.commentType?'act':'inact'">
                                    {{scope.row.commentType | comtype}}<br>
                                     </span>
                                </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" >
                        <template slot-scope="scope" >
                            <div>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType===1"
                                    @click.native.prevent="pass()"
                                    type="text"
                                    size="small">
                                通过
                            </el-button>
                            </div>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType===2"
                                    @click.native.prevent="pass()"
                                    type="text"
                                    size="small">
                                拦截
                            </el-button>
                            <el-button
                                    :class="scope.row.commentType?'act':'inact'"
                                    v-if="scope.row.commentType=3"
                                    @click.native.prevent="del(scope.row.microcircleId,scope.row)"
                                    type="text"
                                    size="small">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!--        分页-->
            <div>
                <el-pagination align='center'
                               @size-change="handleSizeChange"
                               @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "PassComment",
        data(){
            return{
                tableData: [],
                //统计评论状态
                tongji:{all:0,pass:0,block:0,del:0},
                //分页数据
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
            }
        },
        methods:{
            getCommentlist() {
                this.$http.get("/JsComment/getCommentlistpass",{
                    params:{

                    }
                }).then(res => {
                    console.log(res.data);
                    this.tableData = res.data.comment;
                    //查看评论状态的条数
                    this.tongji.all = this.tableData.length;
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].commentType == 1) {
                            this.tongji.pass += 1;
                        } else if (this.tableData[i].commentType == 2) {
                            this.tongji.block += 1;
                        } else if (this.tableData[i].commentType == 3) {
                            this.tongji.del += 1;
                        }
                    }
                })
            },
        },

    }
</script>

<style scoped>
    .box1{
        padding-top: 10px;
        position: relative;
        left: -310px;
    }
</style>